<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
		<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
		<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
	<style>
		@font-face {
		  font-family: 'iconfont';  /* project id 416894 */
		  src: url('http://at.alicdn.com/t/font_416894_vy1ju04z9ofxbt9.eot');
		  src: url('http://at.alicdn.com/t/font_416894_vy1ju04z9ofxbt9.eot?#iefix') format('embedded-opentype'),
		  url('http://at.alicdn.com/t/font_416894_vy1ju04z9ofxbt9.woff') format('woff'),
		  url('http://at.alicdn.com/t/font_416894_vy1ju04z9ofxbt9.ttf') format('truetype'),
		  url('http://at.alicdn.com/t/font_416894_vy1ju04z9ofxbt9.svg#iconfont') format('svg');
		}
		
		
		body{
				margin: 0;
				padding: 0;
				background-color: #f3f3f3;
			}
		.top{
				display: flex;
				width: 100%;
				height: 50px;
				background-color: white;
				position: fixed;
				top: 0;
				box-shadow: 0px 2px 5px #888888;
			}
		.logo{
			height: 40px;
			padding: 5px;
			padding-left: 200px;
		}
		.top_left{
			flex: 1;
		}
		.top_img{
			width: 30px;
			height: 30px;
			background-color: blue;
			margin: 10px;
			
		}
		.top_mid{
			flex: 1;
			font-family: "iconfont" !important;
			text-align: center;
			padding: 13px;
			padding-left: 15px;
		}
		
		
		.top_right{
			flex: 1;
			
		}
		
		.top_find{
			
			padding: 3px;
			
		}
		.searchPrompt{
			padding: 10px;
			margin-top: 60px;
			height: 35px;
			background-color: white;
			text-align: center;
			
		}
		
		.list_item{
			border-bottom: 1px solid #ccc;
			background-color: white;
			/*margin-top: 10px;*/
		}
		.list_item_center{
			width: 70%;
			margin-left: auto;
			margin-right: auto;
		}
		.list_item_info{
			padding: 16px;
			display: flex;
		}
		
		.info_head{
			width: 100px;
		}
		.info_right{
			padding-left: 16px;
			padding-right: 16px;
			flex: 1;
		}
		.info_nickname{
			font-size: 18px;
			font-weight: bold;
		}
		.btn_user{
			padding: 8px;
			text-align: center;
			font-size: 14px;
			cursor: pointer;
			font-family: "iconfont" !important;
			color: #fff;
			background: #00aaff;
			margin-top: 8px;
		}
		.hold{
			width: 80%;
			margin-left: auto;
			margin-right: auto;
			margin-top: 60px;
		}
		.bottom_row{
			text-align: center;
			padding-top: 16px;
			padding-bottom: 16px;
		}

		.load_more_btn{
			display:inline-block; 
			*display:inline; 
			*zoom:1;
			padding: 8px 24px 8px 24px;
			margin-left: auto;
			margin-right: auto;

			border: 1px solid #aaa;
			border-radius: 4px;
			color: #aaa;

			cursor: pointer;
		}
		
	</style>
	</head>
	<body>
		<!-- <div class="top" >
			<div class="top_left">
				<img class="logo" src="img/logo.png" />
			</div>
			<div class="top_mid">
				<input class="top_find" type="text" />
				<span class="search_btn">&#xe6a7;</span>
			</div>
			<div class="top_right">
				<img class="top_img" src="img/back.png" />
			</div>
		</div> -->	
		
		<div id="nav_area"></div>

		<div class="hold">
		<div class="searchPrompt">fsfjlshf</div>
		
		<div id="search_result_list">
				<!-- <div class="list_item_center">
					<div class="list_item_info">
						<div class="info_head">
							<div class="info_head">
								<img src="" style="background: #000; width: 100px; height: 100px;">
							</div>
							<div class="btn_user btn_unfollow">&#xe628; 已关注</div>
						</div>
						<div class="info_right">
							<div class="info_nickname">用户名</div>
							<li>1</li>
							<li>1</li>
							<li>1</li>
							<li>1</li>
						</div>
					</div>
				</div>
			</div> -->
		</div>
		<div class="bottom_row">
			<div class="load_more_btn">
				点击加载更多
			</div>
		</div>
		
		<script src="nav.js"></script>

		<script>
		var searchResultPage = 0;
		var itemPrePage = 10;
		var thisKeyword = '';
		function getQueryString(name){
		     var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
		     var r = window.location.search.substr(1).match(reg);
		     if(r!=null)return  unescape(r[2]); return null;
		}
		$(document).ready(function(){

			showNavBar(function(){
				$("#nav_search_bar").val(thisKeyword);
			});

			thisKeyword = getQueryString("kw");
			loadSearchUserInfo(thisKeyword);	

			document.title = '"'+thisKeyword+'"的搜索结果';

		})
		
		function loadSearchUserInfo(keyword = null){
			var url = "searchUser.do?m="+searchResultPage*itemPrePage+'&n='+(searchResultPage+1)*itemPrePage;
			if (keyword != null) {
				url += "&keyword=" + keyword;
				
			}
			$.get(url, function(data){
			try{
				var jsonObj = JSON.parse(data);
				console.log(jsonObj);
				if (jsonObj.error == 0) {
					for (var i = 0; i < jsonObj.data.length; i++) {
						var thisData = jsonObj.data[i];
						var head_img = 'img/head/' + thisData.head_image + ".jpg";
						var sex = "保密";
						if (thisData.sex == 1) {
							sex = "男";
						}else if (thisData.sex == 2) {
							sex = "女";
						}

						$("#search_result_list").append('<div class="list_item">'+
					'<div class="list_item_center">'+
						'<div class="list_item_info">'+
							'<div class="info_head">'+
								'<div class="info_head">'+
									'<a href="person.html?u='+thisData.user_id+'" target="_blank"><img src="'+head_img+'" style="background: #000; width: 100px; height: 100px;"></a>'+
								'</div>'+
								(thisData.follow_state == 'self' ? '' : '<div class="btn_user '+getActionBtnClass(thisData.follow_state)+'" data-uid="'+thisData.user_id+'">'+getActionBtnText(thisData.follow_state)+'</div>')+
							'</div>'+
							'<div class="info_right">'+
								'<div class="info_nickname"><a href="person.html?u='+thisData.user_id+'" target="_blank">'+thisData.nickname+'</a></div>'+
								'<li>地区: '+thisData.area+'</li>'+
								'<li>性别: '+sex+'</li>'+
								'<li>生日: '+thisData.birthday+'</li>'+
								'<li>个性签名: '+thisData.signature+'</li>'+
							'</div>'+
						'</div>'+
					'</div>');
					}
					if (jsonObj.data.length != 0) {
						searchResultPage += 1;
						$(".searchPrompt").html('"'+thisKeyword+'"的搜索结果');
						if (jsonObj.data.length < itemPrePage) {
							$(".load_more_btn").text("没有更多了");
						}else{
							$(".load_more_btn").text("点击加载更多");							
						}
						
					}else{
						$(".load_more_btn").text("没有更多了");
						$(".searchPrompt").html('找不到"'+thisKeyword+'"相关的用户');
					}
					
					bindBtnAction();
				}
			}catch(ex){

			}
		})
	}

function getActionBtnClass(state){
	switch(state){
		case 'self':
			return 'btn_alter';
		case 'followed':
			return 'btn_unfollow';
		case 'fans':
			return 'btn_follow';
		case 'stranger':
			return 'btn_follow';
		case 'friend':
			return 'btn_friend';
		default:
			return 'btn_follow';
	}
}

function getActionBtnText(state){
	switch(state){
		case 'self':
			return '&#xe603; 修改资料';
		case 'followed':
			return '&#xe628; 已关注';
		case 'fans':
			return '&#xe616; 关注';
		case 'stranger':
			return '&#xe616; 关注';
		case 'friend':
			return '&#xe632; 互相关注';
		default:
			return '&#xe616; 关注';
	}

}

function bindBtnAction(){
	$(".btn_follow,.btn_unfollow,.btn_friend").unbind();
	// $(".btn_follow,.btn_unfollow,.btn_friend").unbind('hover');
	//.unbind('mouseenter').unbind('mouseleave')
	$(".btn_follow").click(function(){
		var uid = $(this).attr("data-uid");
		followUser(uid, $(this));
	})

	$(".btn_unfollow,.btn_friend").click(function(){
		var uid = $(this).attr("data-uid");
		unFollowUser(uid, $(this));
	})

	$(".btn_unfollow").hover(function(){
		$(this).html("&#xe606; 取消关注");
	}, function(){
		$(this).html("&#xe628; 已关注");
	})

	$(".btn_friend").hover(function(){
		$(this).html("&#xe606; 取消关注");
	}, function(){
		$(this).html("&#xe632; 互相关注");
	})
}


function followUser(userid, btn, master = false){
	console.log("follow: "+userid);
	$.post('doFollow.do', {
		user_id: userid
	}, function(data){
		try{
			console.log(data);
			var jsonObj = JSON.parse(data);
			if (jsonObj.error == 0) {
				
				btn.html(getActionBtnText(jsonObj.data.follow_state));

				if (master) {
					btn.removeClass("btn_unfollow_head");
					btn.addClass(getActionBtnClass(jsonObj.data.follow_state)+'_head');
					thisFollowState = jsonObj.data.follow_state;
					bindHeadBtnAction();
					$("#fans_num").text(parseInt($("#fans_num").text()) + 1);
					if (currentTab == 2) {
						refreshFansList(thisUid);
					}
				}else{
					btn.removeClass("btn_follow");
					btn.addClass(getActionBtnClass(jsonObj.data.follow_state));
					bindBtnAction();
				}


				
			}else if (jsonObj.error == 220) {
				window.location.href = "login.html";
			}else{
				alert('系统异常，请稍后刷新页面重试');
			}
		}catch(ex){
			alert('系统异常，请稍后刷新页面重试');
		}
	})
}

function unFollowUser(userid, btn, master = false){
	console.log("unfollow: "+userid);
	$.post('unFollow.do', {
		user_id: userid
	}, function(data){
		try{
			console.log(data);
			var jsonObj = JSON.parse(data);
			if (jsonObj.error == 0) {
				
				if (master) {
					btn.removeClass("btn_unfollow_head");
					btn.removeClass("btn_friend_head");
					btn.addClass(getActionBtnClass(jsonObj.data.follow_state)+'_head');
					thisFollowState = jsonObj.data.follow_state;
					bindHeadBtnAction();
					$("#fans_num").text(parseInt($("#fans_num").text()) - 1);

					if (currentTab == 2) {
						refreshFansList(thisUid);
					}
				}else{
					btn.removeClass("btn_unfollow");
					btn.removeClass("btn_friend");
					btn.addClass(getActionBtnClass(jsonObj.data.follow_state));
					bindBtnAction();
				}
				
				btn.html(getActionBtnText(jsonObj.data.follow_state));
				bindBtnAction();
			}else if (jsonObj.error == 220) {
				window.location.href = "login.html";
			}else{
				alert('系统异常，请稍后刷新页面重试');
			}
		}catch(ex){
			alert('系统异常，请稍后刷新页面重试');
		}
	})
}

$(".load_more_btn").click(function(){
	loadSearchUserInfo(thisKeyword);
})

</script>
		
	</body>
</html>
